<template>
  <div class="Echarts">
    <div id="main" style="width: 600px;height:400px;float:left"></div>
    <div id="sales" style="width: 600px;height:400px;float:left"></div>
  </div>
</template>

<script>
export default {
  name: 'Echarts',

  data(){
      return{
      }
  },
  methods:{
        getOrderData(){
            var myChart = this.$echarts.init(document.getElementById('main'));
            this.$axios.get('getOrderData').then(resp=>{
                if(resp.status==200){
                        myChart.setOption({
                        title:{
                            text:"订单情况"
                        },
                        series : [
                            {
                                name: '访问来源',
                                type: 'pie',    // 设置图表类型为饼图
                                radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                data:resp.data.data
                            }
                        ]
                    })
                }
            })
        },
        getsales(){
            var myChart = this.$echarts.init(document.getElementById('sales'));
            this.$axios.get('getAllTypesToG').then(resp=>{
                if(resp.status==200){
                    console.log(resp)
                        myChart.setOption({
                        title: {
                            text: '各类型销量'
                        },
                        tooltip: {},
                        legend: {
                            data:['销量']
                        },
                        xAxis: {
                            data: resp.data.data2
                        },
                        yAxis: {},
                        series: [{
                            name: '销量',
                            type: 'bar',
                            data: resp.data.data1
                        }]
                    })
                }
            })
        },
  },
  mounted() {
    this.getOrderData()
    this.getsales()
  }
}
</script>

<style>

</style>